<template>
  <div class="app">
    <!-- 头部区域 -->
    <van-nav-bar
      title="黑马程序员.vant"
      :left-text="isHome?'':'返回'"
      :left-arrow="!isHome"
      @click-left="onClickLeft"
    />
    <main>
      <transition mode="out-in">
        <router-view></router-view>
      </transition>
    </main>
    <!-- 底部区域 -->
    <van-tabbar v-model="active" route>
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/member">会员</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" :info="$store.getters.count" to="/shopcar">购物车</van-tabbar-item>
      <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active:0
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  computed: {
    isHome: function() {
      var path = this.$route.path
      return (path == "/") || (path == "/home") ;
    }
  }
};
</script>
<style scoped lang="less">
.van-nav-bar {
  background: #1989fa;
  .van-nav-bar__text,
  .van-icon,
  .van-nav-bar__title {
    color: #fff;
  }
}
.app{
  height:100%;
  .van-nav-bar{
    position: fixed;
    width:100%;
  }
  main{
    height:100%;
    // background:blue;
    box-sizing: border-box;
    padding:46px 0 50px 0;
    overflow-y:scroll;
    overflow-x:hidden;
  }
}

.v-enter{
  transform: translateX(100%);
}
.v-enter-active{
  transition: transform 0.3s ease;
}
.v-enter-to{
  transform: translateX(0);
}

.v-leave{
  opacity: 1;
}
.v-leave-active{
  transition: opacity 0.3s;
}
.v-leave-to{
  opacity: 0.4;
}
</style>